﻿<#assign pageTitle = "${course.courseName!}" />
<#assign channelId = course.channelId! />
<#assign pageContent>
	<div class="body-wrap">
		<div class="video-box">
			<div class="content-wrap relative">
				<div class="video-top">
					<a href="/course/view/${course.courseId!}.html" target="_blank">
						<div class="title">${course.courseName!}</div>
					</a>
					<div class="info ellipsis">${course.intro!}</div>
					<div class="type flex">
						<a href="/course/list.html?channelId=${course.channelId}&subjectId=${course.subjectId!}" target="_blank">
							<span>${course.categoryName!}</span>
						</a>
						<span>共${course.lessonNum!}课时</span></div>
				</div>
				<div class="video-src">
					<video id="video-frame" controls="controls" controlslist="nodownload" height="100%" width="100%" autoplay="autoplay">
						<source type="video/mp4">
					</video>
				</div>
				<div class="video-right">
					<div class="plan">
						<span>已学习</span>
						<div class="layui-progress layui-progress-big" lay-showPercent="yes">
							<div class="layui-progress-bar layui-bg-green" lay-percent="<#if course.studyPercent??>${course.studyPercent!}%<#else>0%</#if>"></div>
						</div>
					</div>
					<div class="menu-title">目录</div>
					<div class="menu-list">
						<#if courseNodeTree?? && courseNodeTree?size gt 0>
							<#list courseNodeTree as item>

								<dl class="menu-item">
									<dt><span class="name">${item.name!}</span><i class="layui-icon layui-icon-up"></i></dt>
									<#if item.children?? && item.children?size gt 0>
										<#list item.children as children>
											<a onclick="videoPlay(${children.courseId},${children.nodeId!})" href="javascript:void(0)">
												<dd <#if playNodeId == children.nodeId>class="active"</#if>>
													<span class="number">${children_index+1}.</span><i class="layui-icon layui-icon-play"></i><span class="name">${children.name!}</span>
													<#if playNodeId == children.nodeId>
														<span class="on-play" style="color: #73f2ff"><i class="icon-living-white"></i> 播放中</span>
													<#else>
														<span class="time">
															<#if children.progress gt 0>
																<span class="time" style="color: #5FB878"><i class="layui-icon layui-icon-ok-circle"></i>已学习</span>
															<#else>
																<span class="time"><i class="layui-icon layui-icon-reduce-circle"></i>未学习</span>
															</#if>
														</span>
													</#if>
												</dd>
											</a>
										</#list>
									</#if>
								</dl>
							</#list>
						</#if>
					</div>
				</div>
			</div>
		</div>
	</div>
</#assign>
<#include "../layouts/layout.ftl">
<script type="text/javascript">
	var nodeId = ${playNodeId};
	var courseId = ${course.courseId};
	var isBuy = ${isBuy?string};
	$(function () {
		$.post("/ajax/course/play/address.json",{"nodeId":nodeId},function (json) {
			if(json.code === 0){
				var player = document.querySelector('#video-frame');
				player.src = json.msg;
				player.play();
				if(isBuy){
					addPlayTimes(nodeId);
					//关闭页面时 保存最后的播放时长
					window.onbeforeunload = function () {
						addPlayTimes(nodeId);
					}
				}
			}else {
				layui.msg(json.msg);
			}
		});
	})

	//记录播放次数
	function addPlayTimes(nodeId) {
		$.ajax({
			url: "/ajax/course/study/times.json",
			data: {
				"nodeId": nodeId
			},
			type: "post",
			dataType: "text",
			success: function (result) {
			}
		});
	}

	function videoPlay(courseId,nodeId) {
		if (isBuy) {
			location.href = "/user/course/play.html?courseId=" + courseId + "&nodeId=" + nodeId;
		} else {
			buyCourse(courseId)
		}
	}
</script>
